<template>
  <div class="app-container">
    <el-card class="box-card">
      <div slot="header" class="clearfix">
        <el-alert
          :title="
            undefined === service || service.name === undefined
              ? '当前选中服务：'
              : '当前选中服务：' + service.name
          "
          type="warning"
          :closable="false"
          show-icon
        />
      </div>
      <el-button
        class="filter-item"
        size="mini"
        style="float: right;padding: 4px 10px"
        type="primary"
        icon="el-icon-plus"
        @click="toRoleAdd()"
      >新增
      </el-button>

      <el-table
        ref="table"
        v-loading="roleLoading"
        :data="roleDataList"
        highlight-current-row
        style="width: 100%;"
        @selection-change="roleSelectionChangeHandler"
      >
        <el-table-column label="角色名称" prop="role.name" />
        <el-table-column
          label="操作"
          width="130px"
          align="center"
          fixed="right"
        >
          <template slot-scope="scope">
            <el-button
              type="danger"
              icon="el-icon-delete"
              size="mini"
              @click="toDeleteRole(scope.row)"
            />
          </template>
        </el-table-column>
      </el-table>
      <el-pagination
        :current-page="queryRole.page"
        :page-size="queryRole.size"
        :total="rolePageSize"
        style="margin-top: 8px;"
        layout="total, prev, pager, next, sizes"
        @current-change="pagerHandleCurrentChange"
        @size-change="pagerHandleSizeChange"
      />
    </el-card>
    <service-entity ref="service" @fetch-data="fetchData" />
    <service-role ref="role" @fetch-data-role="fetchDataRole" />
    <service-set ref="set" @fetch-data="dataSet" />
  </div>
</template>
<script>
import { queryAllByPager, edit, del } from '@/api/system/serviceManager'
import ServiceRole from '@/views/system/service/role'
import {
  queryAllRoleByService,
  del as roleDel
} from '@/api/system/roleService'
export default {
  name: 'ManagerServiceIndex',

  components: { ServiceEntity, ServiceRole },
  data() {
    return {
      delAllLoading: false,
      loading: false,
      roleLoading: false,
      roleDataList: [],
      dataList: [],
      baseUrl: process.env.VUE_APP_BASE_API,
      serviceId: [],
      pagerSize: 10,
      rolePageSize: 10,
      service: {},
      queryRole: {
        label: '',
        page: 1,
        size: 10,
        serviceId: null
      }
    }
  },
  created() {
    this.initData()
  },
  methods: {
    toRoleQuery() {
      this.queryRole.page = 1
      this.initRoleDate()
    },

    toRoleAdd() {
      if (undefined !== this.service && undefined !== this.service.id) {
        this.$refs.role.openEntity(this.service)
      } else {
        this.$message.error('请选择服务')
      }
    },

    initRoleDate() {
      queryAllRoleByService(this.queryRole)
        .then(res => {
          const { content, totalElements } = res
          this.rolePageSize = totalElements
          this.roleDataList = content
        })
        .catch(() => {
          console.log('初始化角色信息失败！')
        })
    },
    toDeleteRole(data) {
      if (data.id !== null && undefined !== data.id) {
        const rolesId = []
        rolesId.push(data.id)
        this.$confirm(
          '此操作将永久删除' + data.role.name + ', 是否继续?',
          '提示',
          {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning'
          }
        )
          .then(() => {
            roleDel(rolesId)
              .then(res => {
                this.$message.success('删除成功！')
                this.initRoleDate()
                this.serviceId = []
              })
              .catch(() => {
                this.$message.error('删除失败！')
              })
          })
          .catch(() => {
            this.$message.success('取消删除成功！')
          })
      } else {
        this.$message.error('请选择删除项！')
      }
    },
    roleSelectionChangeHandler(val) {
      if (val === null || val.length === 0) {
        this.roleIds = []
      } else {
        this.roleIds = val.map(res => {
          return res.id
        })
      }
    },
    handleCurrentChange(val) {
      if (undefined !== val && val !== null && undefined !== val.id) {
        this.service = val
        this.queryRole.serviceId = val.id
        this.initRoleDate()
      }
    },
    pagerHandleCurrentChange(val) {
      this.query.page = val
      this.initData()
    },
    pagerHandleSizeChange(val) {
      this.query.size = val
      this.initData()
    },
    changeEnabled(data, val) {
      this.$confirm(
        '此操作将 "' +
          this.dict.label.user_status[val] +
          '" ' +
          data.name +
          ', 是否继续？',
        '提示',
        {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }
      )
        .then(() => {
          edit(data)
            .then(res => {
              this.$message.success('更新成功')
            })
            .catch(() => {
              data.enabled = !data.enabled
            })
        })
        .catch(() => {
          data.enabled = !data.enabled
        })
    },
    fetchData() {
      this.initData()
    },
    fetchDataRole() {
      this.initRoleDate()
    },
    dataSet() {}
  }
}
</script>

<style scoped>
.crud-opts {
  padding: 4px 0;
  display: -webkit-flex;
  display: flex;
  align-items: center;
}
.crud-opts .crud-opts-right {
  margin-left: auto;
}
</style>
